<template>
	<view class="goodsPage">
		<uni-nav-bar height="88rpx" fixed title="商品详情" color="#000000" :border="false" left-icon="left"
			@clickLeft="$back" statusBar>
		</uni-nav-bar>
		<view class="goodsImgBox">
			<imageSwiper class="goodsImg" :previewImage="true" :imgs="dataInfo.commodityFile"></imageSwiper>
		</view>
		<view class="goodsContent">
			<view class="goodsTitle">
				<view class="title u-line-2">{{dataInfo.commodityName}}</view>
			</view>
			<!-- <view class="goodsPriceRow">
				<view class="goodsAddress">地址：{{dataInfo.purchaseAddress}}</view>
				<text class="goodsExchange">购买费用{{dataInfo.purchaseCost||0}}</text>
			</view> -->
			<view class="goodsPriceRow">
				<view class="goodsPrice">
					<text class="goodsExchange">库存{{dataInfo.inventory||0}}</text>
				</view>
				<view class="goodsExchange">已兑换{{dataInfo.exchange||0}}份</view>
			</view>
			
			<view class="goodsPrice flex-between">
				<text>{{dataInfo.integral}}积分</text>
				<text style="color: black;">兑换地址：{{dataInfo.purchaseAddress}}</text>
			</view>
			
			<view class="flex-center flex-column">
				<view class="" style="margin-bottom: 24rpx;">
					如需购买，请扫描下图二维码
				</view>
				<image src="@/static/common/code.png" style="width: 344rpx;height: 384rpx;margin-bottom: 24rpx;">
				</image>
				<view class="">
					如有其他需求，请联系秦琴18908343696
				</view>
			</view>
			<!-- <view class="goodsDescribe" style="margin-bottom: 20rpx;">
				购买联系人信息:{{dataInfo.purchaseContact}}
			</view> -->
			<!-- <view class="goodsDescribe">{{dataInfo.remark}}</view> -->
			<view class="submitBtnBox">
				<view class="submitBtn" @click="openExchange(dataInfo.integral)">立即兑换</view>
			</view>
		</view>
		<u-modal :show="modalShow" :title="modalOptions.title" :confirmText="modalOptions.onfirmText"
			:cancelText="modalOptions.cancelText" :cancelColor="modalOptions.cancelColor" showCancelButton
			:confirmColor="modalOptions.confirmColor" @confirm="modalconfirm" @cancel="closeDialog"
			@close="closeDialog">
			<view class="Modal-slot-content">
				<view>{{modalOptions.content}}</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import * as exchangeApi from "@/api/exchange.js"
	import * as goodsApi from "@/api/goods.js"
	import * as systemApi from "@/api/system.js"
	export default {
		data() {
			return {
				infoId: '',
				//模态框
				modalShow: false,
				//模态框确认方法
				callback: () => {},
				//当前模态框名字
				now_modalShow: '',
				modalOptions: {
					content: '',
					title: '注意',
					onfirmText: '确认',
					confirmColor: '#6FA9FF',
					cancelText: '取消'
				},
				dataInfo: {
					businessId: 0,
					businessName: "",
					commodityFile: "",
					commodityId: 1,
					commodityName: "",
					commodityStatus: "",
					commodityType: "",
					commodityTypeName: "",
					createBy: null,
					createTime: "",
					exchange: 0,
					inventory: "",
					isRecommend: "",
					redeemPoints: 0,
					remark: "",
					updateBy: null,
					updateTime: "",
				},
				dataList: {
					records: [],
					rows: [],
					pages: 0,
					pageSize: 10,
					total: 0,
					pageNum: 1
				},
				volumeShow: false,
				volumeId: '',
				volumeIdIng: '',
				volumeInfoIng: {},
				volumeInfo: {},
				userInfo: {
					userId: ''
				}
			};
		},
		async onLoad(options) {
			console.log(options);
			this.infoId = options.id
			this.getInfo()
			this.dictData('commodity_type')
			this.userInfo = this.$store.getters.my_userInfo
			if (!this.userInfo) {
				await this.$store.dispatch('userBaseInfo').then(res => {
					this.userInfo = res.user
				})
			}
		},
		methods: {

			openExchange() {
				const that = this
				that.modalOptions.content = `确认用积分兑换吗？`
				that.callBack = () => {
					that.vouchersexchange()
				}
				that.openDialog()
			},
			//打开弹窗
			openDialog(openShow = 'modal') {
				this.now_modalShow = openShow
				this[openShow + 'Show'] = true
			},
			//关闭弹窗
			closeDialog() {
				this[this.now_modalShow + 'Show'] = false
				this.callback = () => {}
				//this.modalOptions = { ...modalOptions }
			},
			//弹窗确认触发
			modalconfirm() {
				console.log(this.callback());
				this.vouchersexchange()
				// this.clearSearch()
			},
			vouchersexchange() {
				const that = this
				// let volumeUserInfo = {}
				// if (this.volumeId) {
				// 	volumeUserInfo = {
				// 		volumeId: this.volumeInfo.volumeId,
				// 		limits: this.volumeInfo.limits
				// 	}
				// } else {
				// 	volumeUserInfo = null
				// }
				uni.$u.throttle(() => {
					exchangeApi.vouchersexchange(that.dataInfo.commodityId).then(res => {
						that.$toast1('兑换成功', setTimeout(() => {
							that.$navTo(
								'pages/common/integral/exchangeRecord/exchangeRecord', {
									status: 1
								})
							that.closeDialog()
						}, 600))
					}).catch(that.closeDialog())
				}, 600)

			},
			dictData(dictType) {
				systemApi.dictDataList(dictType).then(res => {
					console.log(res);
				})
			},
			getInfo() {
				goodsApi.commodityId(this.infoId).then(({
					data
				}) => {
					this.dataInfo = data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.titleBox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		height: 80rpx;
		padding: 0 30rpx;

		.left {
			.cText {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #6FA9FF;
			}
		}

		.center {
			flex: 1;

			.title {
				text-align: center;
			}
		}

		.right {
			.closeText {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #919191;
			}
		}
	}

	.volumeContent {
		max-height: 80vh;
		min-height: 40vh;
		width: 100%;
		background-color: #F4F7FF;
		padding: 30rpx;
		box-sizing: border-box;


	}

	.goodsPage {
		.goodsImgBox {
			margin-bottom: 30rpx;

			.goodsImg {
				width: 100%;
				height: 400rpx;
				object-fit: cover;
			}
		}

		.goodsContent {
			padding: 0 30rpx;

			.goodsTitle {
				font-size: 40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #000000;
				margin-bottom: 12rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.title {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 36rpx;
					color: #000000;
				}

				.right {
					flex-shrink: 0;
					display: flex;
					align-items: center;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;

					.img {
						width: 40rpx;
						height: 40rpx;
						object-fit: cover;
					}

				}
			}

			.goodsRange {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 28rpx;

				.addressText {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #666666;
				}

				.distanceText {
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #6FA9FF;
				}
			}

			.goodsAddress {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #000000;
				margin: 10rpx 0;
			}

			.goodsPriceRow {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				margin-bottom: 20rpx;
			}

			.goodsExchange {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
			}

			.volumeRow {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #FF0000;
				display: flex;
				align-items: center;
				flex-shrink: 0;
			}

			.goodsPrice {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #ffaa00;
				font-weight: bold;
			}

			.goodsDescribe {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #000000;
			}

			.submitBtnBox {
				height: 130rpx;
				width: 100%;

				.submitBtn {
					position: absolute;
					bottom: 40rpx;
					left: 0;
					right: 0;
					margin: auto;
					box-sizing: border-box;
					width: calc(100% - 128rpx - 128rpx);
					display: flex;
					justify-content: center;
					align-items: center;
					width: 494rpx;
					height: 88rpx;
					background: #6FA9FF;
					border-radius: 40rpx;
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}
	}
</style>